@use "@styles/mixins/bem" as *;
@use "@styles/mixins/function" as *;
@use "@styles/common/var" as *;

@include b(chat-person-list) {
  display: flex;
  flex-direction: column;
  width: 360px;
  padding: 20px;
  border-right: 1px solid cssVarEl(border-color);

  @include e(header) {
    padding-bottom: 20px;
  }

  @include e(user-info) {
    display: flex;
    gap: 12px;
    align-items: center;
  }

  @include e(user-details) {
    .name {
      font-size: 16px;
      font-weight: 500;
      color: #222222;
    }

    .email {
      margin-top: 4px;
      font-size: 13px;
      color: #888888;
    }
  }

  @include e(search-box) {
    margin-top: 12px;
  }
}

@media only screen and (max-width: $device-ipad-pro) {
  @include b(chat-person-list) {
    width: 100%;
    height: 170px;
    border-right: none;

    @include e(header) {
      display: none;
    }
  }
}
